﻿@{
    ViewData["Title"] = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<body>
    <div class="layui-container" style="margin:60px 120px">
        <div class="layui-row layui-col-space32">
            <div class="layui-col-md6">
                <!-- 默认卡片样式 -->
                <div class="layui-card" style="background-color:aliceblue;height:250px">
                    <div class="layui-card-header">
                        <h3>生产提示</h3>
                    </div>
                    <div class="layui-card-body">
                        Layui 是一款采用自身模块规范编写的前端 UI 框架，
                        遵循原生 HTML/CSS/JS 的书写与组织形式，
                        极低门槛，拿来即用。
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <!-- 默认卡片样式 -->
                <div class="layui-card" style="background-color:aliceblue;height:250px">
                    <div class="layui-card-header">
                        <h3>种母存栏变动</h3>
                    </div>
                    <div class="layui-card-body">
                        Layui 是一款采用自身模块规范编写的前端 UI 框架，
                        遵循原生 HTML/CSS/JS 的书写与组织形式，
                        极低门槛，拿来即用。
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space32">
            <div class="layui-col-md6">
                <!-- 默认卡片样式 -->
                <div class="layui-card" style="background-color:aliceblue;height:250px">
                    <div class="layui-card-header">
                        <h3>羊场实时存栏</h3>
                    </div>
                    <div class="layui-card-body">
                        <div style="text-align:center">
                            <h3>羊只总存栏</h3>
                            <p style="margin:10px 10px">
                                <span style="color:dodgerblue;font-size:36px;font-weight:600;" id="allCount"></span> 只
                            </p>
                            <p><span id="ratioCount">0</span>% 同比上周</p>
                            <hr />
                            <div style="text-align:center">
                                <div style="float:left">
                                    <span style="color:dodgerblue;font-size:24px;font-weight:200;" id="maternalCount"></span>
                                    <br />
                                    <span>种母存栏</span>
                                </div>
                                <div style="float:left;margin-left:220px">
                                    <span style="color:dodgerblue;font-size:24px;font-weight:200;" id="descendentCount"></span>
                                    <br />
                                    <span>后裔存栏</span>
                                </div>
                                <div style="float:right">
                                    <span style="color:dodgerblue;font-size:24px;font-weight:200;" id="maleCount"></span>
                                    <br />
                                    <span>种公存栏</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <!-- 默认卡片样式 -->
                <div class="layui-card" style="background-color:aliceblue;height:250px">
                    <div class="layui-card-header">
                    </div>
                    <div class="layui-card-body" id="main" style="width:640px; height:250px;margin-top:-36px">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space32">
            <div class="layui-col-md6">
                <!-- 默认卡片样式 -->
                <div class="layui-card" style="background-color:aliceblue;height:250px">
                    <div class="layui-card-header">
                        <h3>种母存栏结构</h3>
                    </div>
                    <div class="layui-card-body">
                        Layui 是一款采用自身模块规范编写的前端 UI 框架，
                        遵循原生 HTML/CSS/JS 的书写与组织形式，
                        极低门槛，拿来即用。
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <!-- 默认卡片样式 -->
                <div class="layui-card" style="background-color:aliceblue;height:250px">
                    <div class="layui-card-header">
                    </div>
                    <div class="layui-card-body" id="Line" style="width:640px; height:250px;margin-top:-36px">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="~/js/echarts.min.js"></script>
<script>
    var $ = layui.$;

    $(function(){
        Bar();
        Line();
    })

    // 实时存栏统计
    $(document).ready(function () {
        $.ajax({
            url: 'http://10.31.60.18:8000/ArchivesGetRout/api/Archives/GetRealTimeStorage', // 后端枚举数据接口地址
            type: 'get',
            dataType: 'json',
            success: function (res) {
                console.log(res);
                $('#allCount').text(res.allCount);
                $('#maternalCount').text(res.maternalCount);
                $('#descendentCount').text(res.descendentCount);
                $('#maleCount').text(res.maleCount);
                $('#ratioCount').text(res.ratioCount.toFixed(2));
            },
            error: function () {
                // 处理 AJAX 请求失败的情况
                console.error('Failed to fetch data for dropdown.');
            }
        });
    });
    var names = [];    //定义数组，数组可自由定义
    var scores = [];
    function Bar() {
        $.ajax({
            url: "http://10.31.60.18:8000/ArchivesGetRout/api/Archives/GetInventoryTrends",
            type: "get",
            async: false,
            dataType: "json",
            success: function (result) {
                console.log(result);
                for (var i = 0; i < result.length; i++) {
                    scores[i] = JSON.parse(result[i].count);//以特定的JSON的格式接收数字
                }
                for (var i = 0; i < result.length; i++) {
                    names[i] = result[i].date;//以JSON的方式接收字符串
                }
                //调用柱状图方法
                InitChart(names, scores);
            },
            error: function (error) {
                alert("Ajax获取服务器数据出错了！" + error);
            }
        });
    }

    //创建一个方法来封装柱状图
    function InitChart(names, scores) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));//初始化echarts
        option = {
            title: {
                text: '近30日存栏趋势'
            },
            tooltip: {
                trigger: 'axis',
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: names
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '存栏',
                    data: scores,
                    type: 'line',
                    areaStyle: {}
                }
            ]  
        };
        // 使用刚指定的配置项和数据显示图表-绑定数据
        myChart.setOption(option);
    };


    var namesLine = [];    //定义数组，数组可自由定义
    var scoresDeathLine = [];
    var scoresElinationLine = [];
    function Line() {
        $.ajax({
            url: "http://10.31.60.18:8000/SheepManagementGetRout/api/SheepManagement/GetDeadTaoTrend",
            type: "get",
            async: false,
            dataType: "json",
            success: function (result) {
                console.log(result);
                for (var i = 0; i < result.length; i++) {
                    scoresDeathLine[i] = JSON.parse(result[i].deathCount);//以特定的JSON的格式接收数字
                }
                for (var i = 0; i < result.length; i++) {
                    scoresElinationLine[i] = JSON.parse(result[i].elinationCount);//以特定的JSON的格式接收数字
                }
                for (var i = 0; i < result.length; i++) {
                    namesLine[i] = result[i].date;//以JSON的方式接收字符串
                }
                //调用折线图方法
                InitChartLine(namesLine, scoresDeathLine, scoresElinationLine);
            },
            error: function (error) {
                alert("Ajax获取服务器数据出错了！" + error);
            }
        });
    }

    //创建一个方法来封装折线图
    function InitChartLine(namesLine, scoresDeathLine, scoresElinationLine) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('Line'));//初始化echarts
        option = {
            title: {
                text: '近30日死淘趋势'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['死亡数', '淘汰数'],
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: namesLine
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '死亡数',
                    type: 'line',
                    data: scoresDeathLine,
                    lineStyle: {
                        color: 'red' // 设置折线颜色为红色
                    },
                    symbol: 'circle', // 设置端点形状为实心圆
                    itemStyle: {
                        color: 'red' // 设置端点颜色与折线颜色一致
                    }
                },
                {
                    name: '淘汰数',
                    type: 'line',
                    data: scoresElinationLine,
                    lineStyle: {
                        color: 'blue' // 设置折线颜色为红色
                    },
                    symbol: 'circle', // 设置端点形状为实心圆
                    itemStyle: {
                        color: 'blue' // 设置端点颜色与折线颜色一致
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表-绑定数据
        myChart.setOption(option);
    };
</script>
